<template>
  <div class="app-container">
      <div style="background-color: white; border-radius: 10px; height: 100px;margin-left: 10px;text-align: center;padding-top: 30px">
        <!-- 多条件分页查询所需条件的form -->
        <el-form :inline="true"  :model="lineTypeDto" class="demo-form-inline">
          <el-form-item label="类型编号">
            <el-input ref="inputRef" v-model="lineTypeDto.type_number" placeholder="请输入线路类型编号"></el-input>
          </el-form-item>
          <el-form-item label="类型名称">
            <el-input ref="inputRef" v-model="lineTypeDto.name" placeholder="请输入线路类型名称"></el-input>
          </el-form-item>
          <el-form-item label="机构类型">
            <el-select v-model="lineTypeDto.agency_type" placeholder="请选择机构类型">
              <el-option label="请选择机构类型" value=""></el-option>
              <el-option label="分公司" value="1"></el-option>
              <el-option label="一级转运中心" value="2"></el-option>
              <el-option label="二级转运中心" value="3"></el-option>
              <el-option label="网点" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="query">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="resetValues">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- end -->

      <div style="background-color: white;margin-top: 10px; margin-bottom: 20px;margin-left: 10px;border-radius: 10px;">

        <!-- 添加车辆按钮 -->
        <el-button type="primary" @click="dataOperation(null,'add')" style="margin-left: 30px;margin-top: 30px">+新增线路类型</el-button>
        <!-- end -->

        <div style="height: 20px"></div>

        <!-- table 用于展示项目建议信息 -->
        <el-table
          v-if="lineTypeShow"
          v-loading="lineTypelistLoading"
          :data="lineTypelist"
          style="width: 96%;margin-left: 32px"
          :max-height="800"
          :row-style="{ height: '55px' }"
        >
          <el-table-column fixed label="线路类型编号" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.type_number }}
            </template>
          </el-table-column>
          <el-table-column label="线路名称" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="起始机构类型" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.start_agency_type === '1' ? '分公司' : (scope.row.start_agency_type === '2' ? '一级转运中心' : (scope.row.start_agency_type === '3' ? '二级转运中心' : '网点')) }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="终点机构类型" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.end_agency_type === '1' ? '分公司' : scope.row.end_agency_type === '2' ? '一级转运中心' : scope.row.end_agency_type === '3' ? '二级转运中心' : '网点' }}
            </template>
          </el-table-column>
          <el-table-column prop="age" label="最后修改时间" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.last_update_time }}
            </template>
          </el-table-column>
          <el-table-column prop="price" label="最后修改人" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.updater }}
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="状态" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.status == 1 ? "启用" : "禁用" }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="120" header-align="center" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="dataOperation(scope.row.id,'update')">编辑</el-button>
              <el-button @click.native.prevent="open(scope.row.id)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- end --->

        <div style="height: 50px;margin-bottom: 10px">

          <!-- 分页组件 -->
          <el-pagination
            background
            @current-change="change"
            @size-change="pageSizeChange"
            :current-page="lineTypePageNumber"
            :page-sizes="[10, 20, 40, 80]"
            :total="lineTypeTotal"
            layout="total, prev, pager, next, sizes,jumper"
            style="text-align: center; font-size: 8px; margin-top: 15px"
          >
          </el-pagination>
          <!-- end -->
        </div>

      </div> <!-- 间隔 -->

      <!-- 抽屉 -->
      <el-drawer
        :title="title"
        :visible.sync="drawer"
        size="50%"
        direction="ttb"
        :before-close="handleClose"
        style="position: fixed; top: 65%; left: 52%; transform: translate(-50%, -50%); width: 50%; max-width: 1200px;height: 800px;border-radius: 10px;"
      >
        <div style="margin-left: 70px">
          <el-form ref="form" :model="form" label-width="80px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="线路类型编号" style="width: 285px" label-width="100px">
                  <el-input type="text" v-model="form.type_number" style="width: 205px"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="线路类型名称" style="width: 285px" label-width="100px">
                  <el-input type="text" v-model="form.name" style="width: 205px"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="起点机构类型" label-width="100px">
                  <el-select v-model="form.start_agency_type" style="width: 205px">
                    <el-option label="请选择" :value="'0'"></el-option>
                    <el-option label="分公司" :value="'1'"></el-option>
                    <el-option label="一级转运中心" :value="'2'"></el-option>
                    <el-option label="二级转运中心" :value="'3'"></el-option>
                    <el-option label="网点" :value="'4'"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="终点机构类型" label-width="100px">
                  <el-select v-model="form.end_agency_type" style="width: 205px">
                    <el-option label="请选择" :value="'0'"></el-option>
                    <el-option label="分公司" :value="'1'"></el-option>
                    <el-option label="一级转运中心" :value="'2'"></el-option>
                    <el-option label="二级转运中心" :value="'3'"></el-option>
                    <el-option label="网点" :value="'4'"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </div>
        <div style="position: absolute; bottom: 30px; right: 40px;">
          <el-button type="primary" @click="agree(logo)">确认</el-button>
          <el-button>取消</el-button>
        </div>
      </el-drawer>
      <!-- end -->
    </div>

</template>

<script>
import { getLineTypeByPage,deleteLineType,addLineType,updateLineType,getLineTypeById } from '@/api/line/line_type'
import user from '@//store/modules/user'

export default {
  data(){
    return {
      logo:'add',
      lineTypeId:'',
      currentTab: 'basic',
      lineTypeDivShow:true,
      lineTypeDetailsDivShow: false,
      selectedValue: '',
      fleet:[],
      lineType_type:[],
      lineTypeShow:true,
      form: {
        id:null,
        name:null,
        type_number:null,
        start_agency_type:null,
        end_agency_type:null,
        last_update_time:null,
        updater:null,
        status:1
      },
      title:'添加线路类型',
      drawer: false,
      lineTypeDto:{
        type_number:null,
        name:null,
        agency_type:null
      },
      lineTypelist: null,
      lineTypelistLoading: true,
      lineTypePageNumber: 1,
      lineTypePageSize: 10,
      lineTypeTotal: 0,
      options:[],
    }
  },
  created() {
    this.init()
  },
  methods:{
    handleChange(file){
      console.log('file', URL.createObjectURL(file.raw));
    },
    //多条件分页查询
    query(){
      this.lineTypePageNumber = 1;
      this.init()
    },
    //初始化
    init(){

      this.lineTypelistLoading = true

      const lineTypeDto = {
        pageNum: this.lineTypePageNumber,
        pageSize: this.lineTypePageSize,
        type_number: this.lineTypeDto.type_number,
        name: this.lineTypeDto.name,
        agency_type: this.lineTypeDto.agency_type
      }

      getLineTypeByPage(lineTypeDto).then(response=>{
        this.lineTypelist = response.data.list
        this.lineTypelistLoading = false
        this.lineTypeTotal = response.data.total
        this.lineTypeShow = true
      })
    },
    //重置分页查询条件
    resetValues() {
      this.$refs.inputRef.clear(); // 清空输入框的值
      this.lineTypeDto.agency_type='' // 清空下拉列表框的选中项
    },
    //分页
    change(val){
      this.lineTypePageNumber = val;
      this.init();
    },
    //分页查询
    pageSizeChange(newPageSize) {
      this.lineTypePageSize = newPageSize;

      this.init()
    },
    dataOperation(id,logo) {
      this.drawer = true
      if(logo==='add'){
        this.logo = 'add'
        this.line_show = true
        this.title = '添加线路类型'
      }else{
        this.title = '修改线路类型'
        this.logo = 'update'
        this.selectShow = true
        this.queryById(id)
      }
    },
    queryById(id) {
      getLineTypeById(id).then(response=>{
        this.form = response.data
      })
    },
    //添加车辆信息
    agree(logo){
      this.form.updater = user.state.name
      if (logo === 'add'){
        this.saveLineType()
      }else {
        this.updateLineType()
      }
    },
    //添加线路类型信息
    saveLineType(){
      addLineType(this.form).then(response=>{
        if (response.code === "200") {
          this.$message({
            message: response.message,
            type: 'success'
          });
          this.drawer = false
          this.form={
            id:null,
              name:null,
              type_number:null,
              start_agency_type:null,
              end_agency_type:null,
              last_update_time:null,
              updater:null,
              status:1
          }
        } else {
          this.$message.error(response.message);
        }
      })
    },
    //修改线路类型信息
    updateLineType(){
      updateLineType(this.form).then(response=>{
        if (response.code === "200") {
          this.$message({
            message: response.message,
            type: 'success'
          });
          this.drawer = false
          this.form={
            id:null,
            name:null,
            type_number:null,
            start_agency_type:null,
            end_agency_type:null,
            last_update_time:null,
            updater:null,
            status:1
          }
        } else {
          this.$message.error(response.message);
        }
      })
    },
    //关闭模态框
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.form={
            id:null,
            name:null,
            type_number:null,
            start_agency_type:null,
            end_agency_type:null,
            last_update_time:null,
            updater:null,
            status:1
          }
          this.lineTypeView = true
          this.licenseView = false
          this.addCount = 0
          done();
        })
        .catch(_ => {});
    },
    //删除车辆信息(其实就是修改车辆状态)
    excise(lineType){
      deleteLineType(lineType).then(response=>{
        this.$message(response.message)
        this.init()
      })
    },
    //删除信息的弹出框
    open(id) {
      const lineType={
        id:id,
        status:0
      }
      const h = this.$createElement;
      this.$msgbox({
        title: '消息',
        message: h('p', null, [
          h('span', null, '你确定要删除此线路类型信息吗? '),
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            this.excise(lineType)
            done()
          } else {
            done();
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.app-container{
  width: 100%;
  height: 908px;
  background-color: #f1f1f1; /* 设置背景颜色 */
}

.container {
  display: flex;
  align-items: center;
}

.title {
  margin-left: 50px;
  margin-top: 30px;
  margin-right: 20px; /* 调整按钮与标题之间的间距 */
  color: black;
}

.close-button {
  margin-left: 900px; /* 将按钮推到最左边 */
}
.el-form-item .el-form-item__label {
  width: auto; /* 自适应宽度 */
  white-space: nowrap; /* 不换行 */
}

.avatar-uploader .el-upload {
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #99a9bf;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
